<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>statistics</title>
    <link rel="stylesheet" href="../static/layui/css/layui.css">
    <script src="../static/layui/layui.js"></script>
    <script src="../static/echarts/echarts.js"></script>
    <style>
        .layui-form-selectup dl {
            top: 42px;
            bottom: unset;
        }
    </style>
</head>
<body>

<!--表单-->
<form class="layui-form" action="" id="queryform">

<!--    <div class="layui-inline">-->
<!--        <label class="layui-form-label">关键字</label>-->
<!--        <div class="layui-inline">-->
<!--            <input type="text" name="keyword" placeholder="请输入名称或电话" autocomplete="off" class="layui-input">-->
<!--        </div>-->
<!--    </div>-->


    <div class="layui-inline">
        <label class="layui-form-label">分组类型</label>
        <div class="layui-inline">
            <select name="type" lay-filter="type">
                <option value="inputUser" selected>员工</option>
                <option value="time">日期</option>
            </select>
        </div>
    </div>

    <div class="layui-inline">
        <button class="layui-btn" lay-submit lay-filter="query">查询</button>
    </div>
</form>


<!--table-->
<table class="layui-hide" id="cutable" lay-filter="cutable"></table>

<!--图标容器-->
<div class="layui-card-body">
    <div id="EchartOrder" style="width: 100%;height: 500px;"> </div>
</div>
<div class="layui-card-body">
    <div id="EchartOrder2" style="width: 100%;height: 500px;"> </div>
</div>

<!--头部工具栏-->
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="pie">饼状图</button>
        <button class="layui-btn layui-btn-sm" lay-event="zhu">柱状图</button>
    </div>
</script>

<script type="text/javascript">

    layui.config({
        base:'../static/echarts/'
    }).use(['table','form','jquery','layer','element', 'echarts'],function () {

        var data_s;
        var table=layui.table;
        var form=layui.form;
        var $=layui.jquery;
        echarts = layui.echarts;
        var echartOrder = echarts.init(document.getElementById('EchartOrder'));
        var echartOrder2 = echarts.init(document.getElementById('EchartOrder2'));

        table.render({
            elem: '#cutable'
            , url: '/customer/statistics'
            , toolbar:'#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            , defaultToolbar:[]
            , title: '顾客数据表'
            , cols: [
                [
                    {type: 'numbers', title: '编号',align: 'center'}
                    ,{field: 'type', title: '分组类型', edit: 'text',align: 'center'}
                    ,{field: 'count', title: '数量', edit: 'text',align: 'center'}
                ]
            ]
            ,request:{
                pageName: 'currentPage',
                limitName: 'PageSize'
            }
            ,parseData:function (res) {
                data_s=res.data.data;
                return{
                    "code":0,
                    "msg":res.msg,
                    "count":res.data.totalConut,
                    "data":res.data.data
                }
            }
            ,page:true

        });


        // 查询提交
        form.on('submit(query)',function (data) {
            // console.log(data.field);
            table.reload('cutable',{
                where:data.field,
                page:{
                    curr:1,
                }
            })
            return false;
        })


        table.on('toolbar(cutable)',function (obj) {
            var layevent=obj.event;

            var typeArry=new Array();
            var countArry=new Array();

            var serlist=data_s;
            for(var i=0;i<serlist.length;i++){
                typeArry[i]=serlist[i].type;
                countArry[i]=serlist[i].count;
            };

            if(layevent=="pie"){

                var rs=[];
                for(var i=0;i<serlist.length;i++){

                    rs.push({
                        value:serlist[i].count,
                        name: serlist[i].type,
                    })
                };
                var echartOrderPie={
                    title:{
                        text:"新增潜在客户饼图",
                        left:'center',
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        top: '5%',
                        left: 'center'
                    },
                    series:[
                        {
                            name:"类别",
                            type:"pie",
                            radius: ['40%', '70%'],
                            avoidLabelOverlap: false,
                            itemStyle: {
                                borderRadius: 10,
                                borderColor: '#fff',
                                borderWidth: 2
                            },
                            label: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: '40',
                                    fontWeight: 'bold'
                                }
                            },
                            labelLine: {
                                show: false
                            },
                            data:rs,
                        }
                    ]

                };
                echartOrder.setOption(echartOrderPie);

            }
            if(layevent=="zhu"){

                var echartOrderzhu={
                    color:['#3398DB'],
                    title:{
                        left:'center',
                        text:'新增潜在客户柱状图',
                    },
                    xAxis:{
                        type:'category',
                        data:typeArry,
                    },
                    yAxis:{
                        type:'value',
                    },
                    series: [
                        {
                            type:'bar',
                            barWith:'30%',
                            data:countArry,
                        }
                    ]
                }
                echartOrder2.setOption(echartOrderzhu);
            }

        })
    })
</script>
</body>
</html>